<script setup>

//习题管理-班级管理
import {ref} from "vue";
import { Search } from '@element-plus/icons-vue'
import {useRouter} from "vue-router";
import Header from "@/components/header/Header.vue";

const currentClassIndex = ref(0)
const currentClassArray = ref([
    '班级A',
    '班级B'
])
//习题管理-习题列表
const currentTestListParms = ref({
  startIndex: 0,
  length: 10,
  totalNum: 98,
})
const currentTestList = ref([
  {
    testId:'1',
    name: '习题A',
    startTime: '2024/12/22 12:00',
    endTime: '2025/12/22 12:00',
    detail: '',
    open: true
  },
  {
    testId:'2',
    name: '习题B',
    startTime: '2024/12/22 12:00',
    endTime: '2025/12/22 12:00',
    detail: '',
    open: false
  },
  {
    testId:'3',
    name: '最长有八个字符吧',
    startTime: '2024/12/22 12:00',
    endTime: '2025/12/22 12:00',
    detail: '',
    open: false
  },
])
const changeTestOpen = (testId)=>{
  //TODO
  console.log('更改某id套题的开源状态')
}
const checkTest = (testId)=>{
  router.push({
    path:'/teacher/editTask',
    query:{
      mode: 'editTest',
      testId: testId
    }
  })
}
//习题管理-新增习题
const router = useRouter()
const setNewTest = ()=>{
  router.push({
    path:'/teacher/editTask',
    query:{
      mode: 'newTest',
      testId: ''
    }
  })
}
//社区好题
const currentOpenTestListParms = ref({
  startIndex: 0,
  length: 10,
  totalNum: 103,
})
const currentOpenTestList = ref([
  {
    testId: 1,
    name: '习题A',
    teacherName: '贡献者1',
    detail: '适用于湖北地区考生，精选阅读理解题20道',
    likeNum: 20,
    liked: true
  },
  {
    testId: 1,
    name: '不超过8个字正正正',
    teacherName: '不超过5个字',
    detail: '不超过30个字正正正正正正正正正正正正正正正正正正正正正正正正正',
    likeNum: 20,
    liked: true
  },
  {
    testId: 1,
    name: '习题A',
    teacherName: '贡献者1',
    detail: '适用于湖北地区考生，精选阅读理解题20道',
    likeNum: 20,
    liked: false
  },
])
const selectMode = ref(0) //0时间排序 1点赞数排序
const selectModeShow = ref([
  '时间排序',
  '点赞排序'
])
const searchDetail = ref()//模糊搜索
const checkOpenTest = (testId)=>{
  router.push({
    path:'/teacher/editTask',
    query:{
      mode: 'checkOpenTest',
      testId: testId
    }
  })
}



</script>

<template>
  <div class="header-content-container">
  <Header>发布习题任务</Header>
  <div class="page-container gradint-background">
    <!--班级、套题管理-->
    <div class="own-ques-container">
      <h1>习题管理</h1>
      <!--当前班级-->
      <div class="current-class-container">
        <div>
          当前班级：{{currentClassArray[currentClassIndex]}}
        </div>
        <div>
          选择班级：
          <el-select
              v-model="currentClassIndex"
              placeholder="Select"
              style="width: 240px"
          >
            <el-option
                v-for="item in currentClassArray"
                :key="currentClassArray.indexOf(item)"
                :label="item"
                :value="currentClassArray.indexOf(item)"
            />
          </el-select>
        </div>
      </div>
      <!--已有习题-->
      <div class="current-tests-container">
        <div class="scroll-container">
          <el-table stripe :data="currentTestList" style="width: 100%">
            <el-table-column fixed prop="name" label="习题集" width="155" />
            <el-table-column prop="startTime" label="开始时间" width="150" />
            <el-table-column prop="endTime" label="结束时间" width="150" />
            <el-table-column prop="open" label="公开" width="100">
              <template #default="scope">
                <el-button v-if="scope.row.open" @click="changeTestOpen(scope.row.testId)" size="small">取消</el-button>
                <el-button v-else size="small" type="primary" @click="changeTestOpen(scope.row.testId)">公开</el-button>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="查看" width="80" >
              <template #default="scope">
                <el-button size="small" @click="checkTest(scope.row.testId)" type="primary">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <el-pagination class="test-select" layout="prev, pager, next" :total="currentTestListParms.totalNum"/>
      </div>
      <!--新增习题-->
     <el-button @click="setNewTest" type="primary" style="height: 36px">新增习题</el-button>
    </div>
    <!--社区好题-->
    <div class="com-ques-contianer white-plate">
      <h1>社区好题</h1>
      <!--模式与搜索-->
      <div class="com-search-container">
        <div style="width: 48%; display: flex; justify-content: space-between">
          <el-select
              v-model="selectMode"
              placeholder="Select"
              style="width: calc(100% - 70px)"
          >
            <el-option
                v-for="item in selectModeShow"
                :key="selectModeShow.indexOf(item)"
                :label="item"
                :value="selectModeShow.indexOf(item)"
            />
          </el-select>
          <el-button type="primary">更新</el-button>
        </div>
        <div style="width: 48%">
          <el-input
              v-model="searchDetail"
              style="width: 100%"
              placeholder="模糊查询"
              class="input-with-select"
          >
            <template #append>
              <el-button :icon="Search" />
            </template>
          </el-input>
        </div>

      </div>
      <el-divider style="margin: 4px"/>
      <!--习题列表-->
      <div class="scroll-container">
        <el-table stripe :data="currentOpenTestList" style="width: 100%">
          <el-table-column fixed prop="name" label="习题集" width="155" />
          <el-table-column prop="teacherName" label="贡献者" width="110" />
          <el-table-column prop="likeNum" label="点赞" width="100">
            <template #default="scope">
              <div v-if="!scope.row.liked" style="display: flex; align-items: center; cursor: pointer;">
                <el-icon style="margin-right: 4px;margin-bottom: 2px"><Star /></el-icon> {{scope.row.likeNum}}
              </div>
              <div v-else style="display: flex; align-items: center; color: #d0be4c">
                <el-icon style="margin-right: 4px;margin-bottom: 2px"><Star /></el-icon> {{scope.row.likeNum}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="detail" label="细节" width="500" />
          <el-table-column fixed="right" label="查看" width="80" >
            <template #default="scope">
              <el-button @click="checkOpenTest(scope.row.testId)" size="small" type="primary">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination class="test-select" layout="prev, pager, next" :total="currentOpenTestListParms.totalNum"/>
    </div>
  </div>
</div>
</template>

<style scoped>
  .header-content-container{
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: auto;
  }
  .page-container{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    overflow: hidden;
  }
  .own-ques-container{
    height: calc(100% - 48px);
    width: calc(50% - 48px);
    padding: 12px;
    margin: 12px;
    animation: left-in .6s 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .current-class-container{
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .current-tests-container{
    width: 100%;
    flex: 0.94;
    background-color: #ffffffee;
    border: 1px solid #eee;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .current-tests-container .scroll-container{
    flex: 1;
    width: 100%;
    padding: 4px 12px;
  }
  .current-tests-container .test-select{

  }

  .com-ques-contianer{
    width: calc(50% - 48px);
    height: calc(100% - 48px);
    margin: 12px;
    padding: 12px;
    animation: right-in .6s 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
  .com-search-container{
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .com-ques-contianer .scroll-container{
    flex: 0.94;
    width: 100%;
  }

  h1{
    font-size: 19px;
    letter-spacing: 2px;
    width: 100%;
  }
</style>
